<!DOCTYPE html>
<html lang="en" style="font-size:10px;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>KeepMoving</title>
    <link rel="stylesheet" href="css/index/index.css">
    <link rel="stylesheet" href="plugins/index/1.css">
    <link rel="stylesheet" href="plugins/index/2.css">
    <link rel="stylesheet" href="plugins/index/3.css">
    <link rel="stylesheet" href="plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../keep-moving/css/nav/nav.css">
    <link rel="stylesheet" href="../keep-moving/js/nav/nav.js">
    
</head>


<body>
    <!-- 响应式导航 begin -->
    <div id="o-header">
        <div class="layui-header header header-index" style="background: rgba(34,34,34,0.0);">
            <a class="logo" href="index.html">
                KeepMoving
            </a>

            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-this"><a href="index.html">首页</a></li>
                <li class="layui-nav-item ">
                    <a href="views/plan/plan-index.html">训练计划</a>
                </li>
                <li class="layui-nav-item"><a href="views/action/fit-action.html">健身动作</a></li>
                <li class="layui-nav-item"><a href="views/food/food.html">饮食健康</a></li>
                <li class="layui-nav-item ">
                    <a href="views/user/login01.html">登录</a>
                </li>
                <li class="layui-nav-item ">
                    <a href="views/user/register.html">注册</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><img src="imgs/person-center/girl.jpg" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="views/person/person-center.html">个人中心</a></dd>
                        <dd><a href="views/person/person-info-fitness.html">账号设置</a></dd>
                        <dd><a href="">退出账号</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <script src="plugins/layui/layui.js"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

            //监听导航点击
            element.on('nav(demo)', function (elem) {
                //console.log(elem)
                layer.msg(elem.text());
            });
        });
    </script>
    <!-- 响应式导航 end -->

    <!-- 响应式导航 end -->

    <div class="video-large-wrap" style="display: none;">
        <div id="video-close">
            <!-- <i class="keep-icon-close"></i> -->
        </div>
        <video src="../keep-moving/video/index.mp4" controls></video>
    </div>



    <script>
        (function () {
            var height = window.innerHeight,
                width = document.body.clientWidth;
            if (typeof height != 'number') {
                height = document.body.clientHeight;
            }
            var ratio = height / width;
            document.write('<style>.video-head-wrap{padding-bottom:' + ratio * 100 + '% !important;}.body-wrap{padding-top:' + ratio * 100 + '%;}</style>');
            //背景视频为1280*720
            if (ratio > (720 / 1280)) {
                var leftOffset = -(height * 1280 / 720 - width) / 2;
                document.write('<style>#video-bg{height:100%;margin-left:' + leftOffset + 'px;}</style>');
            } else {
                var topOffset = -(width * 720 / 1280 - height) / 2;
                document.write('<style>#video-bg{width:100%;margin-top:' + topOffset + 'px;}</style>');
            }
        })();
    </script>

    <div class="body-wrap">

        <!-- 上部视频开始 -->
        <div id="div1">
            <header class="video-head-wrap" style="z-index: -1;">
                <a href="#plan">
                    <div class="video-container">
                        <div id="div1"></div>
                        <video id="video-bg" src="../keep-moving/video/index.mp4" muted="" autoplay="" loop="">
                        </video>

                        <div class="video-control" id="jump" style="background: rgba(34,34,34,0.8);opacity: 0.6;">
                            <img style="opacity: 1;" src="../keep-moving/imgs/index/index-text .png" alt="">

                        </div>

                        <div class="video-bottom">
                            <div class="bottom-left">Keep Moving<br><br>运动使我快乐!</div>

                        </div>
                    </div>
                </a>

            </header>
            <!-- 上部视频结束 -->

        </div>
    </div>
    <!-- 视频--课程展示中间文字 -->
    <div class="content-wrap" style=" height: 100px; z-index:500;">
        <section>
            <div class="paragraph" id="plan">
                <div class="para-title">热门的健身计划</div>
                <div class="para-text">网罗最热门的健身计划。让你在健身中享受过程，在健康中体验快乐！</div>

            </div>
            <div class="training-wrap">
                <div class="training-wrap-inner">
                    <div class="training-block">
                        <a href="" style="background-image: url('imgs/index/1.png')" class="training-item">
                            <div class="training-detail">
                                <div class="training-title">1计划</div>
                            </div>
                        </a>
                        <a href="" style="background-image: url('imgs/index/2.png')" class="training-item">
                            <div class="training-detail">
                                <div class="training-title">2计划</div>
                            </div>
                        </a>
                        <a href="" style="background-image: url('imgs/index/3.png')" class="training-item">
                            <div class="training-detail">
                                <div class="training-title">3计划</div>
                            </div>
                        </a>
                        <a href="" style="background-image: url('imgs/index/3.png')" class="training-item">
                            <div class="training-detail">
                                <div class="training-title">3计划</div>
                            </div>
                        </a>
                    </div>
                    <div class="training-text">
                        <div class="text-title">同步训练</div>
                        <div class="text-cont">同步你的训练进度,畅享自由。</div>
                    </div>
                    <div class="body-pic-wrap">
                        <img src="imgs/index/4.png" class="body-pic">
                        <img src="imgs/index/5.png" class="circle-pic">
                    </div>


                </div>
            </div>
        </section>
        <section>
            <div class="paragraph community-para">
                <div class="para-title">实时健身用户推送</div>
                <div class="para-text">别人在努力改变自己的时候，你在干什么？快快加入进来吧！</div>
            </div>
            <div class="users-wrap">
                <div class="users-text">
                    <div class="users-title">
                        <div>他们,在运动!</div>
                    </div>
                    <div class="users-cont">滴下的每一滴汗水,都是你日后的收获!</div>
                </div>

                <hr style="color: black; height: 2px;">
                <div class="user-list-wrapp" style="margin-right: 400px; margin-top: 80px; float:right;">
                    <div class="scrollbox">
                        <div id="scrollDiv">
                            <ul>
                                <li>
                                    <h3><a href="#" class="linktit">用户1</a></h3>
                                    <div>为了探索推进公车改革后，新能源汽车分时租赁项目试点工作，并成立了试点工作小组... </div>
                                </li>
                                <li>
                                    <h3><a href="#" class="linktit">用户2</a></h3>
                                    <div>DIV CSS JS自动不断向上一个一个滚动可控制向上向下滚动特效... </div>
                                </li>
                                <li>
                                    <h3><a href="#" class="linktit">用户3</a></h3>
                                    <div>我国涂料工业将面临涂料消费税征收全面铺开，环保压力持续增加，2015年的形势不容乐观... </div>
                                </li>
                                <li>
                                    <h3><a href="#" class="linktit">用户4</a></h3>
                                    <div>镂空罩衫，短短的版型穿起来显高又俏皮，内搭长款连衣裙，非常大方哦... </div>
                                </li>
                                <li>
                                    <h3><a href="#" class="linktit">用户5</a></h3>
                                    <div>目前已有包括咖啡厅、酒吧、餐厅、瑜伽室在内的8家商铺入驻该火车... </div>
                                </li>
                            </ul>
                            
                            
                        </div>

                    </div>
                </div>



            </div>

    </div>
    </section>
    </div>
    <script src="plugins/jquery/jquery.min.js"></script>
    <script src="js/nav/nav.js"></script>
    <script>
        $(document).scroll(function () {
            if ($(document).scrollTop() > 60) {
                $("#o-header").addClass('o-header')
            } else {
                $("#o-header").removeClass('o-header')
            }
        })
    </script>
    <script src="../keep-moving/plugins/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="../keep-moving/plugins/jquery/jq_scroll.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#scrollDiv").Scroll({ line: 1, speed: 600, timer: 4000, up: "but_up", down: "but_down" });
        });
    </script>
</body>

</html>